<template>
    <el-menu
        mode="horizontal"
        :ellipsis="false"
        style="height: 100%; opacity: 0.8"
        router
    >
        <el-menu-item index="/square" style="width:15%">广场</el-menu-item>
        <el-menu-item index="/elite" style="width:15%">精华</el-menu-item>
        <el-sub-menu index="" style="width:15%"><template #title>其它</template>
            <el-menu-item index="/tech">科技</el-menu-item>
            <el-menu-item index="/ACG">ACG</el-menu-item>
            <el-menu-item index="/Life">生活</el-menu-item>
            <el-menu-item index="/Study">学习</el-menu-item>
        </el-sub-menu>


        <div class="flex-grow" />
      <div style="display: flex; justify-content: center; align-items: center">
        <el-button @click="postForum" type="primary" style="margin-right: 15px">发帖</el-button>
        <el-avatar v-if="base64Avatar" @click="toWelcome" :src="base64Avatar"
                   style="width: 65px;
                   height: 65px"
                   class="avatar" />
        <el-avatar @click="toWelcome" v-else
                   v-bind:style="{cursor:'pointer'}"
                   style="width: 65px;
                   height: 65px"
                   fit="fit"
                   src="/images/avatar.jpeg"/>
      </div>

    </el-menu>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from "@/router";
import {getWithToken} from "@/net/postAndGetMethodWithToken";

const toWelcome = ()=>{
  router.push({name:'person'})
}

const postForum = () =>{
  window.open('/edit' ,'_blank')
}

const props = defineProps({
        activeIndex:String
})


const base64Avatar = ref('')
onMounted(async () => {
  getWithToken('/api/avatar/download',
      (data,code,message)=>{
        base64Avatar.value = data
      },() =>{return false})
})


</script>

<style>
.flex-grow {
    flex-grow: 1;
}
</style>
